<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>沧海拾“遗”源梦寻迹!</title>
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="stylesheet" href="./css/index-header.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/footer.css">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/index.js"></script>
		<style type="text/css">
			  	* {
			  		box-sizing: border-box;
			  		margin: 0;
			  		padding: 0;
			  	}
			  
			  	#box {
                    width: 100%;
			  		height: 400px;
			  		overflow: hidden;
			  		position: relative;
					margin-top: -10px;
			  
			  	}
			  
			  	#lunboimg {
			  		width: 700px;
			  		height: 400px;
			  		position: absolute;
			  		display: flex;
			  	}
			  
			  	a {
			  		width: 700px;
			  		height: 400px;
			  	}
			  
			  	img {
			  		width: 700px;
			  		height: 400px;
			  		margin: 0;
			  	}
			  #box:hover #selector {
			  				display: flex;
			  			}
			
			  
			 	#selector {
			 				width: 400px;
			 				height: 20px;
			 				position: absolute;
			 				bottom: 0;
			 				left: 135px;
			 				display: none;
			 				justify-content: space-between;
			 				z-index: 100;
							
			 			}
			 
			 			#selector>span {
			 				width: 15px;
			 				height: 15px;
			 				border-radius: 50%;
			 				background-color: lightsalmon;
			 				opacity: 0.9;
			 				margin-right: 5px;
			 				cursor: pointer;
			 			}
			 
			 			#selector>span:hover {
			 				background-color: #8A8A8A;
			 			}
			
			            .wenzi{
							height: 400px;
							margin: -398px 100px 200px 900px;
							font-size: 17px;
						}
						
			  </style>
		</head>
	
		<body>
			<!-- 导航栏 -->
			<div class="header">
				<div class="all">
					<div class="left">
					</div>
					<div class="right">
						<ul>
							<li><a href="index.html">首页</a></li>
							<li><a href="introduce.html">非遗介绍</a></li>
							<li><a href="specialty.html">非遗故事</a></li>
							<li><a href="store.html">商城</a></li>
							<li><a href="store.html">我的</a></li>
						</ul>
					</div>
				</div>
			</div>
	
			<!-- 页面头部 -->
			<div class="bc">
				<div>
					<h4>
					<a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;沧海拾“遗”源梦寻迹<br>联合云端互联网+打造非遗元宇宙</a></h4>
					<a href="javascript:;">
						<div class="more">
							了解更多
						</div>
					</a>
				</div>
			</div>
	
			<!-- 主要部分 -->
			<div class="main">
				<div class="introduce">
					<div class="about">
						中国非物质文化遗产
					</div>
				</div>
				
				<div id="box">
					
					<!-- 放图片-->
					<div id="lunboimg">
						<a href="#">
							<!-- 仅放一张图片，通过JS来改变图片地址即可-->
							<img src="./img/3.jpg">
						</a>
						
					</div>
					
					<!-- 放底部圆点-->
					<div id="selector">
						<span id=""></span>
						<span id=""></span>
						<span id=""></span>
						<span id=""></span>
					</div>
		
				</div>
				<div class="wenzi">
					<p><b>&nbsp;&nbsp;&nbsp;&nbsp;中国非物质文化遗产，是指中国各族人民世代相传，并视为其文化遗产组成部分的各种传统文化表现形式，
					以及与传统文化表现形式相关的实物和场所。非物质文化遗产是中华优秀传统文化的重要组成部分，
					是中华文明绵延传承的生动见证，是连结民族情感、维系国家统一的重要基础。
					</b></p>
					<br>
					<p><b>&nbsp;&nbsp;&nbsp;&nbsp;而中国是一个多民族的国家，悠久的历史和灿烂的古代文明为中华民族留下了极其丰富的文化遗产。截至2023年12月，中国已经建立起具有中国特色的国家、省、市、县四级的名录体系，四级名录共认定非遗代表性项目10万余项，一大批珍贵、濒危和具有重大价值的非遗得到了有效的保护。</b></p>
				</div>
				
				
				<div class="scenery">
					<div class="introduce01">
						<div class="about">
							非遗文化
						</div>
					</div>
					<ul class="etc">
						<li>
							<img src="./img/汉调桄桄.jpg" alt="">
							<div class="mask">
								<h3>汉调桄桄</h3>
								<a href="introduce.html"><button>了解更多</button></a>
							</div>
						</li>
						<li>
							<img src="./img/造纸.jpg" alt="">
							<div class="mask">
								<h3>龙亭蔡伦造纸传说</h3>
								<a href="introduce.html"><button>了解更多</button></a>
							</div>
						</li>
						<li>
							<img src="./img/汉中藤编.jpg" alt="">
							<div class="mask">
								<h3>汉中藤编</h3>
								<a href="introduce.html"><button>了解更多</button></a>
							</div>
						</li>
						<li>
							<img src="./img/洋县皮影.jpg" alt="">
							<div class="mask">
								<h3>洋县皮影</h3>
								<a href="introduce.html"><button>了解更多</button></a>
							</div>
						</li>
						<li>
							<img src="./img/打铁花.jpg" alt="">
							<div class="mask">
								<h3>洋县架花焰火技艺</h3>
								<a href="introduce.html"><button>了解更多</button></a>
							</div>
						</li>
						<li>
							<img src="./img/社火.jpg" alt="">
							<div class="mask">
								<h3>洋县悬台社火艺术</h3>
								<a href="introduce.html"><button>了解更多</button></a>
							</div>
						</li>
					</ul>
				</div>
				</div>
			<div class="footer">
				<div class="infor">
					
					<p>信息工程学院</p>
				
				</div>
				<div class="call">
				
					<div class="number">
						<img src="img/weChatNumber.jpg" alt="">
					</div>
					
				</div>
			</div>
			<script type="text/javascript">
				let img = document.querySelector('img');
				let span = document.querySelectorAll('span');
				let left = document.getElementById('left');
				let right = document.getElementById('right');
				let index = 0;
				let timer;
				function show(){
					img.src = `img/${index}.jpg`;
				}
			
				function autoPlay() {
					timer = setInterval(function() {
						if (index == span.length) {
							index = 0;
						}
						show();
						index++;
					}, 2300);
				}
				autoPlay();
				
				function ctrlPlay(){
								for(let i = 0; i < span.length; i++){
									span[i].onclick = function(){
										index = i;
										show();
									}
								}
							}
							ctrlPlay();
			
			
				function clickPlay(){
					left.onclick = function(){
						if(index <= 0){
							index = span.length - 1;
						}else{
							index --;
						}
						show();
					}
					right.onclick = function(){
						index ++;
						if(index == span.length){
							index = 0;
						}
					
						show();
					}
				}
				clickPlay();
				function eventList(){
					for(let i = 0; i < span.length; i++){
						span[i].addEventListener('mouseenter',function(){
							clearInterval(timer);
							index = i;
							show();
						},false);
						span[i].addEventListener('mousemove',function(){
							clearInterval(timer);
							autoPlay();
						},false);
						
					}
				}
				eventList();
			</script>
			
		</body>
	
	</html>
	
	
	
	